import { Badge, Button, Card, DatePicker, Form, Input, Modal, Space, Table, Tabs } from "antd"
import { ColumnsType } from "antd/es/table"
import React from "react"
import SaveAuth from "./components/SaveParams"
import { ActionButton, QueryFilter, useAntdList, useAntdModal } from "@web-design/ui"
import { queryTaskList, saveTask } from "../../../api/task"
import SaveParams from "./components/SaveParams"



const App = () => {
    const [form] = Form.useForm();
   const {tableProps,search,tabsProps, refresh} = useAntdList(queryTaskList,{
    tabsKey:'status',
    defaultTabsActiveKey:'',
    form
   })
    const saveParams = useAntdModal({refresh})
    const columns: ColumnsType<any> = [
        {
            title: '任务ID',
            dataIndex: 'id',
        },
        {
            title: '任务名称',
            dataIndex: 'name',
        },
        {
            title: '任务类型',
            dataIndex: 'type',
        },
        {
            title: '任务参数',
            dataIndex:'params',
            render(value, record, index) {
                return <Button onClick={()=>{
                    Modal.info({
                        title:'查看参数',
                        width:800,
                        okText:'关闭',
                        content:<div>
                            <Input.TextArea rows={10} value={JSON.stringify(JSON.parse(value),null,2)} />
                         
                        </div>
                    })
                }} type="link">查看</Button>
            },
            // dataIndex: 'params',
        },
        {
            title: '任务状态',
            dataIndex: 'status',
            render(value, record, index) {
                if(value=='wait'){
                    return  <Badge color="yellow" text='等待执行' />
                }
                if(value=='not_started'){
                    return  <Badge color="yellow" text='未开始' />
                }
                if(value=='runing'){
                    return  <Badge color="yellow" text='执行中' />
                }
                if(value=='done'){
                    return   <Badge color="green" text='已完成' />
                }
                
                return   <Badge color="red" text='失败' />
            },
        },
        {
            title: '创建者',
            dataIndex: 'creator',
        },
        {
            title: '失败原因',
            dataIndex: 'failReason',
            render(value, record, index) {
                if(value){
                    return <Button size='small' onClick={()=>{
                        Modal.info({
                            title:'失败原因',
                            okText:'关闭',
                            width:600,
                            content:<div>
                                {value}
                            </div>
                        })
                    }}>查看</Button>
                }
            },
        },
        {
            title: '更新时间',
            dataIndex: 'updatedAt',
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
        },
        {
            title:'操作',
            render(value, record, index) {
                return <Space>
                    <ActionButton refresh={refresh} action={()=>saveTask({status:'not_started',id:value.id})}  size="small" >重试</ActionButton>
                    <Button onClick={()=>saveParams.openModal(value)} size="small" >编辑</Button>
                    <Button size="small"  danger>删除</Button>
                </Space>
            },
        }

    ]
    return <Card>
        <QueryFilter
        items={[
            {
                label:'任务名称',
                name:'name'
            },
            {
                label:'创建时间',
                name:'createTime',
                children:<DatePicker.RangePicker/>
            }
        ]}
        form={form}
         submit={search.submit}
         reset={search.reset}
        />
        <SaveParams {...saveParams}/>
        <Tabs
        tabBarExtraContent={
            <Space>
                <Button onClick={()=>saveParams.openModal({})}>增加任务</Button>
            </Space>
        }
        {...tabsProps}
        items={[{
            label:'全部',
            key:''
        },{
            label:'未开始',
            key:'not_started'
        },{
            label:'等待执行',
            key:'wait'
        },{
            label:'进行中',
            key:'runing'
        },{
            label:'已完成',
            key:'done'
        },{
            label:'失败',
            key:'fail'
        }]}
        />
        <Table size="small" columns={columns} {...tableProps} />
    </Card>
}
export default App